From a076df852b51981d099bd2a6e81470b653ead150 Mon Sep 17 00:00:00 2001 From: Jakub Steiner Date: Fri, 18 Mar 2016 13:53:30 +0100 Subject: [PATCH] Hight Contrast: scrollbars https://bugzilla.gnome.org/show_bug.cgi?id=763797 --- gtk/theme/HighContrast/_colors.scss | 7 + gtk/theme/HighContrast/_common.scss | 194 +++++++++++++----- .../HighContrast/gtk-contained-inverse.css | 175 ++++++++++++---- gtk/theme/HighContrast/gtk-contained.css | 173 ++++++++++++---- 4 files changed, 421 insertions(+), 128 deletions(-) diff --git a/gtk/theme/HighContrast/_colors.scss b/gtk/theme/HighContrast/_colors.scss index 30716d1333..d3d3b44ebb 100644 --- a/gtk/theme/HighContrast/_colors.scss +++ b/gtk/theme/HighContrast/_colors.scss @@ -16,6 +16,11 @@ $borders_color: mix($bg_color,$fg_color,50%); $borders_edge: if($variant == 'light', #fff, #000); $link_color: $selected_bg_color; +$scrollbar_bg_color: if($variant == 'light', mix($bg_color, $fg_color, 95%), mix($base_color, $bg_color, 60%)); +$scrollbar_slider_color: mix($fg_color, $bg_color, 60%); +$scrollbar_slider_hover_color: mix($fg_color, $bg_color, 80%); +$scrollbar_slider_active_color: if($variant=='light', darken($selected_bg_color, 10%), lighten($selected_bg_color, 10%)); + $suggested_color: #4a90d9; $warning_color: #f57900; $error_color: #cc0000; @@ -38,6 +43,8 @@ $backdrop_bg_color: $bg_color; $backdrop_fg_color: $fg_color; $backdrop_borders_color: mix($borders_color, $bg_color, 90%); $backdrop_dark_fill: mix($fg_color, $bg_color, 30%); +$backdrop_scrollbar_bg_color: darken($backdrop_bg_color, 3%); +$backdrop_scrollbar_slider_color: mix($backdrop_fg_color, $backdrop_bg_color, 40%); //apps rely on some named colors to be exported /* GTK NAMED COLORS */ diff --git a/gtk/theme/HighContrast/_common.scss b/gtk/theme/HighContrast/_common.scss index d42ae3ec8c..42d8cc13be 100644 --- a/gtk/theme/HighContrast/_common.scss +++ b/gtk/theme/HighContrast/_common.scss @@ -1765,82 +1765,178 @@ notebook { /************** * Scrollbars * **************/ - scrollbar { - background-clip: padding-box; - background-image: none; - border-style: solid; - -GtkScrollbar-has-backward-stepper: false; - -GtkScrollbar-has-forward-stepper: false; - -GtkRange-slider-width: 20; - -GtkScrollbar-min-slider-length: 42; // minimum size for the slider. - // sadly can't be in '.slider' - // where it belongs + $_slider_min_length: 40px; - trough { @extend junction; } + // disable steppers + @at-root * { + -GtkScrollbar-has-backward-stepper: false; + -GtkScrollbar-has-forward-stepper: false; + } - $_slider_margin: 3px; - $_slider_fine_tune_margin: 4px; + background-color: $scrollbar_bg_color; + transition: 300ms $ease-out-quad; - button { - border: none; + // scrollbar border + &.top { border-bottom: 1px solid $borders_color; } + &.bottom { border-top: 1px solid $borders_color; } + &.left { border-right: 1px solid $borders_color; } + &.right { border-left: 1px solid $borders_color; } + + &:backdrop { + background-color: $backdrop_scrollbar_bg_color; + border-color: $backdrop_borders_color; } - & slider { - border-radius: 20px; - border: 5px solid transparent; //margin - background-color: mix($bg_color, $fg_color, 50%); - &:backdrop, &:disabled { - background-color: mix($bg_color, $fg_color, 90%); - } - &:hover { - background-color: mix($bg_color, $fg_color, 30%); - } - &:hover:active { - background-color: $selected_bg_color; - } - &.fine-tune { - border-width: 8px; - &:hover:active { - background-color: $selected_bg_color; - } + + // slider + slider { + min-width: 14px; + min-height: 14px; + margin: -1px; + border: 4px solid transparent; + border-radius: 12px; + background-clip: padding-box; + background-color: $scrollbar_slider_color; + + &:hover { background-color: $scrollbar_slider_hover_color; } + + &:hover:active { background-color: $scrollbar_slider_active_color; } + + &:backdrop { background-color: $backdrop_scrollbar_slider_color; } + + &:disabled { background-color: transparent; } + } + + &.fine-tune { + slider { + min-width: 4px; + min-height: 4px; } + + &.horizontal slider { border-width: 5px 4px; } + &.vertical slider { border-width: 4px 5px; } } + &.overlay-indicator { - &:not(.dragging):not(.hovering) { // Overlay scrolling indicator + &:not(.dragging):not(.hovering) { + border-color: transparent; opacity: 0.4; - - -GtkRange-slider-width: 5px; + background-color: transparent; slider { margin: 0; + min-width: 3px; + min-height: 3px; + background-color: $fg_color; + border: 1px solid if($variant == 'light', white, black); + } + + button { + min-width: 5px; + min-height: 5px; background-color: $fg_color; - border: 1px solid white; background-clip: padding-box; + border-radius: 100%; + border: 1px solid if($variant == 'light', white, black); + -gtk-icon-source: none; } - trough { - border-style: none; - background-color: transparent; + &.horizontal { + slider { + margin: 0 2px; + min-width: $_slider_min_length; + } + + button { + margin: 1px 2px; + min-width: 5px; + } } - // w/o the following margin tweaks the slider shrinks when hovering/dragging - &.vertical slider { - margin-top: $_slider_margin - 1px; - margin-bottom: $_slider_margin - 1px; + &.vertical { + slider { + margin: 2px 0; + min-height: $_slider_min_length; + } + + button { + margin: 2px 1px; + min-height: 5px; + } } + } - &.horizontal slider { - margin-left: $_slider_margin - 1px; - margin-right: $_slider_margin - 1px; + &.dragging, + &.hovering { opacity: 0.8; } + } + + &.horizontal slider { min-width: $_slider_min_length; } + + &.vertical slider { min-height: $_slider_min_length; } + + // button styling + button { + padding: 0; + min-width: 12px; + min-height: 12px; + border-style: none; + border-radius: 0; + transition-property: min-height, min-width, color; + + @include button(undecorated); + + color: $scrollbar_slider_color; + + &:hover { + @include button(undecorated); + + color: $scrollbar_slider_hover_color; + } + &:active, &:checked { + @include button(undecorated); + + color: $scrollbar_slider_active_color; + } + &:disabled { + @include button(undecorated); + + color: transparentize($scrollbar_slider_color, 0.8); + } + &:backdrop { + @include button(undecorated); + + color: $backdrop_scrollbar_slider_color; + + &:disabled { + @include button(undecorated); + + color: transparentize($backdrop_scrollbar_slider_color, 0.8); } + } + } + // button icons + &.vertical { + button { + &.down { -gtk-icon-source: -gtk-icontheme('pan-down-symbolic'); } + + &.up { -gtk-icon-source: -gtk-icontheme('pan-up-symbolic'); } } + } - &.dragging, - &.hovering { opacity: 0.7; } + &.horizontal { + button { + &.down { -gtk-icon-source: -gtk-icontheme('pan-right-symbolic'); } + + &.up { -gtk-icon-source: -gtk-icontheme('pan-left-symbolic'); } + } } } +treeview ~ scrollbar.vertical { + border-top: 1px solid $borders_color; + margin-top: -1px; +} /********** * Switch * diff --git a/gtk/theme/HighContrast/gtk-contained-inverse.css b/gtk/theme/HighContrast/gtk-contained-inverse.css index 35df3d626a..55468c3478 100644 --- a/gtk/theme/HighContrast/gtk-contained-inverse.css +++ b/gtk/theme/HighContrast/gtk-contained-inverse.css @@ -1891,48 +1891,147 @@ notebook { * Scrollbars * **************/ scrollbar { - background-clip: padding-box; - background-image: none; - border-style: solid; - -GtkScrollbar-has-backward-stepper: false; - -GtkScrollbar-has-forward-stepper: false; - -GtkRange-slider-width: 20; - -GtkScrollbar-min-slider-length: 42; } - scrollbar button { - border: none; } + background-color: #0a0a0a; + transition: 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94); } + * { + -GtkScrollbar-has-backward-stepper: false; + -GtkScrollbar-has-forward-stepper: false; } + scrollbar.top { + border-bottom: 1px solid gray; } + scrollbar.bottom { + border-top: 1px solid gray; } + scrollbar.left { + border-right: 1px solid gray; } + scrollbar.right { + border-left: 1px solid gray; } + scrollbar:backdrop { + background-color: black; + border-color: #737373; } scrollbar slider { - border-radius: 20px; - border: 5px solid transparent; - background-color: gray; } - scrollbar slider:backdrop, scrollbar slider:disabled { - background-color: #1a1a1a; } + min-width: 14px; + min-height: 14px; + margin: -1px; + border: 4px solid transparent; + border-radius: 12px; + background-clip: padding-box; + background-color: #999999; } scrollbar slider:hover { - background-color: #b3b3b3; } + background-color: #cccccc; } scrollbar slider:hover:active { - background-color: #aaa; } - scrollbar slider.fine-tune { - border-width: 8px; } - scrollbar slider.fine-tune:hover:active { - background-color: #aaa; } + background-color: #c4c4c4; } + scrollbar slider:backdrop { + background-color: #666666; } + scrollbar slider:disabled { + background-color: transparent; } + scrollbar.fine-tune slider { + min-width: 4px; + min-height: 4px; } + scrollbar.fine-tune.horizontal slider { + border-width: 5px 4px; } + scrollbar.fine-tune.vertical slider { + border-width: 4px 5px; } scrollbar.overlay-indicator:not(.dragging):not(.hovering) { + border-color: transparent; opacity: 0.4; - -GtkRange-slider-width: 5px; } + background-color: transparent; } scrollbar.overlay-indicator:not(.dragging):not(.hovering) slider { margin: 0; + min-width: 3px; + min-height: 3px; background-color: #fff; - border: 1px solid white; - background-clip: padding-box; } - scrollbar.overlay-indicator:not(.dragging):not(.hovering) trough { - border-style: none; - background-color: transparent; } - scrollbar.overlay-indicator:not(.dragging):not(.hovering).vertical slider { - margin-top: 2px; - margin-bottom: 2px; } + border: 1px solid black; } + scrollbar.overlay-indicator:not(.dragging):not(.hovering) button { + min-width: 5px; + min-height: 5px; + background-color: #fff; + background-clip: padding-box; + border-radius: 100%; + border: 1px solid black; + -gtk-icon-source: none; } scrollbar.overlay-indicator:not(.dragging):not(.hovering).horizontal slider { - margin-left: 2px; - margin-right: 2px; } + margin: 0 2px; + min-width: 40px; } + scrollbar.overlay-indicator:not(.dragging):not(.hovering).horizontal button { + margin: 1px 2px; + min-width: 5px; } + scrollbar.overlay-indicator:not(.dragging):not(.hovering).vertical slider { + margin: 2px 0; + min-height: 40px; } + scrollbar.overlay-indicator:not(.dragging):not(.hovering).vertical button { + margin: 2px 1px; + min-height: 5px; } scrollbar.overlay-indicator.dragging, scrollbar.overlay-indicator.hovering { - opacity: 0.7; } + opacity: 0.8; } + scrollbar.horizontal slider { + min-width: 40px; } + scrollbar.vertical slider { + min-height: 40px; } + scrollbar button { + padding: 0; + min-width: 12px; + min-height: 12px; + border-style: none; + border-radius: 0; + transition-property: min-height, min-width, color; + border-width: 2px; + border-style: solid; + color: #fff; + background-color: transparent; + background-image: none; + border-color: transparent; + color: #999999; } + scrollbar button:hover { + border-width: 2px; + border-style: solid; + color: #fff; + background-color: transparent; + background-image: none; + border-color: transparent; + color: #cccccc; } + scrollbar button:active, scrollbar button:checked { + border-width: 2px; + border-style: solid; + color: #fff; + background-color: transparent; + background-image: none; + border-color: transparent; + color: #c4c4c4; } + scrollbar button:disabled { + border-width: 2px; + border-style: solid; + color: #fff; + background-color: transparent; + background-image: none; + border-color: transparent; + color: rgba(153, 153, 153, 0.2); } + scrollbar button:backdrop { + border-width: 2px; + border-style: solid; + color: #fff; + background-color: transparent; + background-image: none; + border-color: transparent; + color: #666666; } + scrollbar button:backdrop:disabled { + border-width: 2px; + border-style: solid; + color: #fff; + background-color: transparent; + background-image: none; + border-color: transparent; + color: rgba(102, 102, 102, 0.2); } + scrollbar.vertical button.down { + -gtk-icon-source: -gtk-icontheme("pan-down-symbolic"); } + scrollbar.vertical button.up { + -gtk-icon-source: -gtk-icontheme("pan-up-symbolic"); } + scrollbar.horizontal button.down { + -gtk-icon-source: -gtk-icontheme("pan-right-symbolic"); } + scrollbar.horizontal button.up { + -gtk-icon-source: -gtk-icontheme("pan-left-symbolic"); } + +treeview ~ scrollbar.vertical { + border-top: 1px solid gray; + margin-top: -1px; } /********** * Switch * @@ -2672,16 +2771,12 @@ scrolledwindow undershoot.right { background-position: right center; border: none; box-shadow: none; } -placessidebar junction, placessidebar scrollbar trough, scrollbar placessidebar trough, -scrolledwindow junction, -scrolledwindow scrollbar trough, -scrollbar scrolledwindow trough { +placessidebar junction, +scrolledwindow junction { border-color: transparent; background-color: black; } - placessidebar junction:backdrop, placessidebar scrollbar trough:backdrop, scrollbar placessidebar trough:backdrop, - scrolledwindow junction:backdrop, - scrolledwindow scrollbar trough:backdrop, - scrollbar scrolledwindow trough:backdrop { + placessidebar junction:backdrop, + scrolledwindow junction:backdrop { background-color: transparent; } separator, placessidebar .view separator, placessidebar textview text separator, textview placessidebar text separator, placessidebar iconview separator, diff --git a/gtk/theme/HighContrast/gtk-contained.css b/gtk/theme/HighContrast/gtk-contained.css index cc78539d8d..b7b69bf0b9 100644 --- a/gtk/theme/HighContrast/gtk-contained.css +++ b/gtk/theme/HighContrast/gtk-contained.css @@ -1895,48 +1895,147 @@ notebook { * Scrollbars * **************/ scrollbar { - background-clip: padding-box; - background-image: none; - border-style: solid; - -GtkScrollbar-has-backward-stepper: false; - -GtkScrollbar-has-forward-stepper: false; - -GtkRange-slider-width: 20; - -GtkScrollbar-min-slider-length: 42; } - scrollbar button { - border: none; } + background-color: #f2f2f2; + transition: 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94); } + * { + -GtkScrollbar-has-backward-stepper: false; + -GtkScrollbar-has-forward-stepper: false; } + scrollbar.top { + border-bottom: 1px solid gray; } + scrollbar.bottom { + border-top: 1px solid gray; } + scrollbar.left { + border-right: 1px solid gray; } + scrollbar.right { + border-left: 1px solid gray; } + scrollbar:backdrop { + background-color: #f7f7f7; + border-color: #8d8d8d; } scrollbar slider { - border-radius: 20px; - border: 5px solid transparent; - background-color: gray; } - scrollbar slider:backdrop, scrollbar slider:disabled { - background-color: #e6e6e6; } + min-width: 14px; + min-height: 14px; + margin: -1px; + border: 4px solid transparent; + border-radius: 12px; + background-clip: padding-box; + background-color: #666666; } scrollbar slider:hover { - background-color: #4d4d4d; } + background-color: #333333; } scrollbar slider:hover:active { - background-color: #000; } - scrollbar slider.fine-tune { - border-width: 8px; } - scrollbar slider.fine-tune:hover:active { - background-color: #000; } + background-color: black; } + scrollbar slider:backdrop { + background-color: #999999; } + scrollbar slider:disabled { + background-color: transparent; } + scrollbar.fine-tune slider { + min-width: 4px; + min-height: 4px; } + scrollbar.fine-tune.horizontal slider { + border-width: 5px 4px; } + scrollbar.fine-tune.vertical slider { + border-width: 4px 5px; } scrollbar.overlay-indicator:not(.dragging):not(.hovering) { + border-color: transparent; opacity: 0.4; - -GtkRange-slider-width: 5px; } + background-color: transparent; } scrollbar.overlay-indicator:not(.dragging):not(.hovering) slider { margin: 0; + min-width: 3px; + min-height: 3px; + background-color: #000; + border: 1px solid white; } + scrollbar.overlay-indicator:not(.dragging):not(.hovering) button { + min-width: 5px; + min-height: 5px; background-color: #000; + background-clip: padding-box; + border-radius: 100%; border: 1px solid white; - background-clip: padding-box; } - scrollbar.overlay-indicator:not(.dragging):not(.hovering) trough { - border-style: none; - background-color: transparent; } - scrollbar.overlay-indicator:not(.dragging):not(.hovering).vertical slider { - margin-top: 2px; - margin-bottom: 2px; } + -gtk-icon-source: none; } scrollbar.overlay-indicator:not(.dragging):not(.hovering).horizontal slider { - margin-left: 2px; - margin-right: 2px; } + margin: 0 2px; + min-width: 40px; } + scrollbar.overlay-indicator:not(.dragging):not(.hovering).horizontal button { + margin: 1px 2px; + min-width: 5px; } + scrollbar.overlay-indicator:not(.dragging):not(.hovering).vertical slider { + margin: 2px 0; + min-height: 40px; } + scrollbar.overlay-indicator:not(.dragging):not(.hovering).vertical button { + margin: 2px 1px; + min-height: 5px; } scrollbar.overlay-indicator.dragging, scrollbar.overlay-indicator.hovering { - opacity: 0.7; } + opacity: 0.8; } + scrollbar.horizontal slider { + min-width: 40px; } + scrollbar.vertical slider { + min-height: 40px; } + scrollbar button { + padding: 0; + min-width: 12px; + min-height: 12px; + border-style: none; + border-radius: 0; + transition-property: min-height, min-width, color; + border-width: 2px; + border-style: solid; + color: #000; + background-color: transparent; + background-image: none; + border-color: transparent; + color: #666666; } + scrollbar button:hover { + border-width: 2px; + border-style: solid; + color: #000; + background-color: transparent; + background-image: none; + border-color: transparent; + color: #333333; } + scrollbar button:active, scrollbar button:checked { + border-width: 2px; + border-style: solid; + color: #000; + background-color: transparent; + background-image: none; + border-color: transparent; + color: black; } + scrollbar button:disabled { + border-width: 2px; + border-style: solid; + color: #000; + background-color: transparent; + background-image: none; + border-color: transparent; + color: rgba(102, 102, 102, 0.2); } + scrollbar button:backdrop { + border-width: 2px; + border-style: solid; + color: #000; + background-color: transparent; + background-image: none; + border-color: transparent; + color: #999999; } + scrollbar button:backdrop:disabled { + border-width: 2px; + border-style: solid; + color: #000; + background-color: transparent; + background-image: none; + border-color: transparent; + color: rgba(153, 153, 153, 0.2); } + scrollbar.vertical button.down { + -gtk-icon-source: -gtk-icontheme("pan-down-symbolic"); } + scrollbar.vertical button.up { + -gtk-icon-source: -gtk-icontheme("pan-up-symbolic"); } + scrollbar.horizontal button.down { + -gtk-icon-source: -gtk-icontheme("pan-right-symbolic"); } + scrollbar.horizontal button.up { + -gtk-icon-source: -gtk-icontheme("pan-left-symbolic"); } + +treeview ~ scrollbar.vertical { + border-top: 1px solid gray; + margin-top: -1px; } /********** * Switch * @@ -2679,16 +2778,12 @@ scrolledwindow undershoot.right { background-position: right center; border: none; box-shadow: none; } -placessidebar junction, placessidebar scrollbar trough, scrollbar placessidebar trough, -scrolledwindow junction, -scrolledwindow scrollbar trough, -scrollbar scrolledwindow trough { +placessidebar junction, +scrolledwindow junction { border-color: transparent; background-color: #f2f2f2; } - placessidebar junction:backdrop, placessidebar scrollbar trough:backdrop, scrollbar placessidebar trough:backdrop, - scrolledwindow junction:backdrop, - scrolledwindow scrollbar trough:backdrop, - scrollbar scrolledwindow trough:backdrop { + placessidebar junction:backdrop, + scrolledwindow junction:backdrop { background-color: transparent; } separator, placessidebar .view separator, placessidebar textview text separator, textview placessidebar text separator, placessidebar iconview separator, -- 2.30.2